<template>
	<view class="top-content">
		<u-row gutter="0">
			<u-col span="10">
				<!--定位图标-->
				<u-icon v-if="map" name="map" size="45" color="white" ></u-icon>
				<u-icon v-else name="map-fill" size="45" color="white"></u-icon>
				<!-- 显示文字内容 -->
				<text class="top-text">{{positionMsg}}</text>
				<!-- 下箭头小图标 -->
				<u-icon @click="arrowDownMethod(indexd)"  :index="indexd"  name="arrow-down-fill" color="white"></u-icon>
			</u-col>
			<u-col span="1">
				<!-- 二维码扫描图标 -->
				<u-icon @click="scanMethod()" name="scan" size="45" color="white"></u-icon>
			</u-col>
			<u-col span="1">
				<!-- 消息图标 -->
				<u-icon @click="chatMethod()" name="chat" size="45" color="white"></u-icon>
				<!-- 小红点 -->
				<ubadge :is-dot="true" size="mini" v-if="show" :absolute="absolute" :offset="posArray"></ubadge>
			</u-col>
		</u-row>
	</view>
</template>



<script>
	
	

	import ubadge from "./u-badge.vue";
	
	export default {
		name:"topPosition",
		components:{

			ubadge
		},
		props:['positionMsg','show'],
		data() {
			return {
				indexd:2,
				//定位小图标是否显示
				map:true,
				// positionMsg:"君不见,黄河之水天上来...",
				//红点绝对定位
				absolute:true,
				//红点坐标
				posArray:[100,20]
			};
		},
		methods:{
			//下箭头图标函数
			arrowDownMethod(index){
				console.log('arrowDown'+index);
			},
			//消息图标函数
			chatMethod(index){
				console.log('chat'+index);
			},
			//二维码图标函数
			scanMethod(index){
				console.log('scan'+index);
			},
		}
	}
</script>

<style lang="scss">
	.top-text{
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		
	}
	
	.top-content{
		background-color: #20C3FE;
		height: 200rpx;
		padding-top: 100rpx;
		padding-left: 20rpx;
	}
</style>
